<template>
  <a-modal
    title="申样进度"
    :width="660"
    :visible="visible"
    @ok="handleModalConfirm"
    @cancel="handleModalCancel"
    :confirm-loading="modalLoading"
    @after-open="saveFocusedElement"
    @after-close="restoreFocusedElement"
  >
    <div>
      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2: dataObj.schedule_info?.apply_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">申样创建：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.apply_time
              ? dataObj.schedule_info?.apply_time
              : "暂无创建时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2: dataObj.schedule_info?.audit_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">申样审核：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.audit_time
              ? dataObj.schedule_info?.audit_time
              : "暂无审核时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2: dataObj.schedule_info?.contact_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">联系商家：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.contact_time
              ? dataObj.schedule_info?.contact_time
              : "暂无联系时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2: dataObj.schedule_info?.deliver_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">申样发货：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.deliver_time
              ? dataObj.schedule_info?.deliver_time
              : "暂无发货时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2: dataObj.schedule_info?.bind_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">绑定商品：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.bind_time
              ? dataObj.schedule_info?.bind_time
              : "暂无绑定时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2: dataObj.schedule_info?.activity_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">活动创建：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.activity_time
              ? dataObj.schedule_info?.activity_time
              : "暂无创建时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2:
              dataObj.schedule_info?.activity_goods_apply_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">商品报名：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.activity_goods_apply_time
              ? dataObj.schedule_info?.activity_goods_apply_time
              : "暂无报名时间"
          }}
        </div>
      </div>

      <div class="time_txt_bsc_flex">
        <div
          class="time_txt_bsc_yuan"
          :class="{
            time_txt_bsc_yuan2:
              dataObj.schedule_info?.activity_goods_audit_time === '',
          }"
        ></div>
        <div class="time_txt_bsc_yuan_txt">商品审核：</div>
        <div class="time_txt_bsc_yuan_time">
          {{
            dataObj.schedule_info?.activity_goods_audit_time
              ? dataObj.schedule_info?.activity_goods_audit_time
              : "暂无审核时间"
          }}
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import * as Ajax from "@/api/channel";
import { mapState, mapGetters } from "vuex";
export default {
  props: {
    task_uuid: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    dataObj: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      modalLoading: false,
      form: {
        typeOptions: "",
        secretKey: "",
        channelCode: "",
        ks_user: "",
        loanAssistanceStatus: false,
        price: "",
        shareProfit: undefined,
        type: undefined,
        remark: "",
        master: "",
      },
      formRules: {
        ks_user: {
          required: true,
          message: "请输入达人信息",
          trigger: ["blur", "change"],
        },
        companyName: {
          required: true,
          message: "请输入公司名称",
          trigger: ["blur", "change"],
        },
        price: {
          required: true,
          message: "请输入价格",
          trigger: ["blur", "change"],
        },
        shareProfit: {
          required: true,
          message: "请选择分润模式",
          trigger: ["blur", "change"],
        },
        type: {
          required: true,
          message: "请选择渠道类型",
          trigger: ["blur", "change"],
        },
        master: {
          required: true,
          message: "请选择达人",
          trigger: ["blur", "change"],
        },
      },
      typeOptions: [
        { label: "同业", value: 0 },
        { label: "信息流", value: 1 },
      ],
      shareOptions: [
        { label: "单价", value: 0 },
        { label: "分润", value: 1 },
      ],
      focusedElement: null,
      testInfo: {
        order_count: "",
        commission: "",
        commission2: "",
      },
      tipShow: false,
      customersListOptions: [],
      ks_user_id: "",
      nickname: "",
    };
  },
  computed: {
    ...mapGetters("user", ["getCdnUrl", "getUserInfo"]),
  },
  methods: {
    processImage(imageUrl) {
      if (imageUrl === undefined || imageUrl === null) {
        return ""; // 或者返回一个默认的 URL
      }

      if (!imageUrl.startsWith("http")) {
        return this.getCdnUrl + imageUrl;
      }
      return imageUrl;
    },
    handleModalConfirm() {
      this.handleModalCancel();
    },

    handleModalCancel() {
      this.$emit("close");
    },
    saveFocusedElement() {
      this.focusedElement = document.activeElement;
    },
    restoreFocusedElement() {
      if (this.focusedElement) {
        this.focusedElement.focus();
      }
    },

    search() {
      console.log("search");
      Ajax.customersSeach({
        page: 1,
        list_rows: 30,
        ks_user: this.form.ks_user,
      })
        .then((res) => {
          if (res.error === 0) {
            this.customersListOptions = res.data.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getPopupContainer(triggerNode) {
      return triggerNode.parentNode;
    },
    handlePopupScroll(value) {
      const { scrollHeight, scrollTop, clientHeight } = value.target;
      if (scrollHeight - scrollTop === clientHeight && !this.noMoreData) {
        this.get_customersList(this.page);
      }
    },
    async handleSelectChange(value) {
      // 找到所选的达人信息

      const selectedUser = this.customersListOptions.find(
        (user) => user.id === value
      );
      if (selectedUser) {
        console.log("selectedUser", selectedUser);
        this.ks_user_id = selectedUser.ks_user_id;
        this.nickname = selectedUser.nickname;
      } else {
        console.log("未找到对应的达人");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
.tips_box {
  padding: 4px;
}
.text {
  // font-size: 16px;
  color: #999999;
  margin: 10px 0;
  // text-align: center;
  span {
    color: #e33b35;
  }
}
.sale {
  display: flex;
  align-items: center;
  margin-left: 4px;
  margin-bottom: 10px;
  div {
    font-size: 14px;
    span {
      color: #e33b35;
    }
  }
}
.time_txt_bsc_flex{
		margin-bottom: 24rpx;
		line-height: 40rpx;
		display: flex;
    text-align: center;
	}
  .time_txt_bsc_yuan{
		margin-right: 12rpx;
		margin-top: 14rpx;
		border-radius: 12rpx;
		width: 12rpx;
		height: 12rpx;
		background-color: #FF790C;
	}
  .time_txt_bsc_yuan2{
		margin-top: 14rpx;
		border-radius: 12rpx;
		width: 12rpx;
		height: 12rpx;
		background-color: #999999 !important;

	}
  .time_txt_bsc_yuan_time {
    font-size: 12px;
  }
</style>